<template>
<div class="tagcloud-block-root">
  <div class="title">标签云</div>
  <div class="echart" style="width: 100%; height: calc(100% - 18px);"></div>
</div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-wordcloud'
// https://github.com/ecomfe/echarts-wordcloud

export default {
  name: 'tagcloud-block',
  mounted(){
    var el = this.$el.getElementsByClassName('echart')[0]
    var chart = echarts.init(el)
    chart.setOption({
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '90%',
        height: '90%',
        right: null,
        bottom: null,
        sizeRange: [12, 38],
        rotationRange: [0, 0],
        gridSize: 32,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            color: '#c3c3c3'
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: [
          {name: '南海', value: 99},
          {name: '永兴岛', value: 60},
          {name: '菲律宾', value: 60},
          {name: '航母', value: 60},
          {name: '日本', value: 35},
          {name: '巨型高射炮', value: 35},
          {name: '永暑岛', value: 25},
          {name: 'F-22', value: 25},
          {name: '歼10', value: 20},
          {name: '美军', value: 20},
          {name: '解放军', value: 15}
        ]
      }]
    })
  }
}
</script>

<style scoped lang="stylus">
.tagcloud-block-root
  padding-top 14px
  >.title
    color #59b3ff
    font-size 16px
    height 18px
    margin-left 16px
    &:before
      content ''
      display inline-block
      height 4px
      width 4px
      border-radius 50%
      background @color
      vertical-align middle
      margin-right 10px
      
</style>
